<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	#textBox{
		position: absolute;
		left: 0;
		top: 0;
		z-index: -999;
	}
	#bg{
		background: url(sgws.jpg) -50px;

		width:500px;
		height: 314px;
		text-align: center;
		position: relative;
		-webkit-animation:roll 3s infinite ease ;
		   -moz-animation:roll 3s infinite ease ;
		    -ms-animation:roll 3s infinite ease ;
		     -o-animation:roll 3s infinite ease ;
				animation:roll 3s infinite ease ;
	}
	#barHome{
		width: 300px;
		height: 10px;
		background: #f00;
		overflow: hidden;
		position: absolute;
		bottom: 45px;
		left: 50%;
		margin-left: -150px;
	}
	#barGuest{
		width: 150px;
		height: 10px;
		background: #00f;
	}
	#results{
		width: 300px;
		position: absolute;
		bottom: 65px;
		left: 50%;
		margin-left: -150px;
		color: #fff;
	}
	#results span{
		margin: 50px;
	}
	@-webkit-keyframes roll {0%{background-position: -90px;}50%{background-position: -10px;}100%{background-position: -90px;}}
	@-moz-keyframes roll {0%{background-position: -90px;}50%{background-position: -10px;}100%{background-position: -90px;}}
	@-ms-keyframes roll {0%{background-position: -90px;}50%{background-position: -10px;}100%{background-position: -90px;}}
	@-o-keyframes roll {0%{background-position: -90px;}50%{background-position: -10px;}100%{background-position: -90px;}}
	@keyframes roll {0%{background-position: -90px;}50%{background-position: -10px;}100%{background-position: -90px;}}
</style>
<title>mediator</title>
</head>
<body>
	<div id="bg">
		<input id="textBox" type="text" />
		<div id="results">请按F键与J键</div>
		<div id="barHome">
			<div id="barGuest"></div>
		</div>
	</div>
<script type="text/javascript" src="mediator.js"></script>
</body>
</html>